/* CSS Document */

/* 

Authors - WPTitans
Description - This styling deals with styling of backend admin panel only.

*/


/* ========================================================================== */
/* == Hades Input & Input Block Settings ==================================== */
/* ========================================================================== */


/* == Base Holder for elements ========================= */

.hades_wrap .hades_input { border-bottom:1px solid #eee; padding-bottom: 30px;}

/* == ~~ Description of inputs ========================= */
.hades_input small {  padding:2px 5px 2px 30px;  font-size:10,5px;  margin-left:6px; float:right; width:235px;  }
.hades_input small span { -webkit-border-radius: 3px; -moz-border-radius: 3px; width:235px; display:block; padding:7px 10px;  color:#333; background: #FFFFE0;  margin-top:0px; line-height: 14px;letter-spacing: 0; border: 1px solid #E6DB55;font-size: 11px;}

/* == Radio behavior ================================ */

.radio { display:block; clear:left; }
.radio label { width:auto; }

/* == Checkbox behavior ================================ */

.check-group {  width:280px;  display:block; float:left;  padding: 3px; font-size: 11px; }
.check-group p { margin:0; padding:0; display:block;}
.check-group input { float:left; margin-top:7px; }
.check-group label { width:200px; position:relative; z-index:4; float: left;display: block; color: #777; font-weight: normal; font-size: 12px;}


/* == Colorpicker Description ================================ */

.hades_input .width-small { width:100px!important; }
.hades_input .colorSelector { float:left; }

/* == Slider behaviour ======================================== */

.hades_input .ui-slider { float:left; }
.hades_input .slider-text { width:60px!important;  }
.slider-suffix { padding:2px 3px 0px 5px!important; }

.hades_input .ui-slider { position: relative; text-align: left;  background: url(i/slider-bar.png) repeat-x;  margin-top:-7px; width:190px; margin-left: 5px; margin-right:10px; }
.hades_input .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width:31px; height:29px; cursor: pointer; background: url(i/handle.png) top left no-repeat; margin-top: 3px;}
.hades_input .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.hades_input .ui-slider-horizontal { height:51px; }
.hades_input .ui-slider-horizontal .ui-slider-handle { top: 8px;  margin-left:-8px;   }
.hades_input .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.hades_input .ui-slider-horizontal .ui-slider-range-min { left: 0; }
.hades_input .ui-slider-horizontal .ui-slider-range-max { right: 0; }

/* == Select behaviour ======================================== */

.select-wrapper { float:left; width:280px; }


/* ============================================================ */
/* == Parent Wrapper ========================================== */
/* ============================================================ */

#hades_opts { padding: 15px; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .2) inset; -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, .2) inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; background: #d9d9d9; background: rgba(0,0,0, .05); width: 787px;  }

/* ============================================================ */
/* == Sub titles in Tabs ====================================== */
/* ============================================================ */

.subtitle-heading:first-child { -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; }
.subtitle-heading { display:block; clear:left!important; padding:20px; background:#eee; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin-left: -5px; margin-right: -5px; margin-top: -5px;}
.subtitle-heading a { font-size:16px; text-decoration:none; font-weight:600; color: #444; padding-left: 0px; display:block; text-shadow: 1px 1px 1px #fff; } 

.subtitle-heading a:hover {color: #2175A3!important; text-decoration: underline;} 


/* ============================================================ */
/* == Side Menu =============================================== */
/* ============================================================ */


#themenav { position:relative; z-index:1; width:147px; float:left; -webkit-border-radius: 3px; -moz-border-radius: 3px;-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .2);-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, .2); background: #fff; margin-right: -1px; }
#themenav li:first-child { border-top:none; }
#themenav li {   display:block; padding:0; width:147px;  border-bottom:1px solid #eee; margin:0; }
#themenav li:last-child {   border-bottom: none; }
#themenav li a { text-shadow: 1px 1px 1px #fff; text-decoration:none; color:#999;  display:block; padding:9px 10px; font-size:12px;   margin:0; }
#themenav li a:hover { color: #2175A3!important; }
#themenav li a:hover { color: #2175A3!important; }

#themenav li.ui-state-active:first-child {-webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-top:1px solid #ddd;}
#themenav li.ui-state-active:last-child {-webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom: none;}
#themenav li.ui-state-active { margin-top: -1px; background:#eee; display:block; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
#themenav li.ui-state-active a {text-decoration:none; color:#333; display:block; align:center; text-shadow: 1px 1px 1px #fff;}
#themenav li.ui-state-active a:hover { color: #2175A3!important; }

/* == Logo Panel ================ */

.logo-panel img { max-width:100%;  }

/* ============================================================ */
/* == Sub Panels ============================================== */
/* ============================================================ */

#panel-wrapper { width:615px; float:left; margin-left: 15px; -webkit-border-radius: 3px;-moz-border-radius: 3px; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, .2); background: #fff; padding: 5px;}

.hades_options { margin:0px; padding:0;background:#fff; }
.hades_subpanel {   float:left; background:#ffffff; padding: 10px;   width:585px;  }

.hades_wrap .hades_input>label { display:block; float:left!important; width:95%; clear:right;  }
/* ============================================================ */
/* == Top Panels ============================================== */
/* ============================================================ */

.top-panel { padding:20px 0 15px 0; }
#homecontent { padding-bottom:40px; }
#homecontent .top-panel { display:block; position:relative; bottom:-30px!important;}
#homecontent .home-editor-wrapper { margin-bottom:40px!important; }
/* ============================================================ */
/* == Visual Panel Styling ==================================== */
/* ============================================================ */

#visual_plain_panel h2 , #visual_textured_panel h2 {font-size: 18px;} 
#visual_plain_panel ul , #visual_textured_panel ul   { display:block; margin:20px 0 30px 0; }
#visual_plain_panel ul li , #visual_textured_panel ul li { float:left; width:80px;  margin:10px; }
#visual_plain_panel ul li img  , #visual_textured_panel ul li img{ display:block; border:5px solid #fff; -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;box-shadow:0px 0px 0px 1px #eee; }
#visual_plain_panel ul li a  , #visual_textured_panel ul  li a { display:block; text-align:center; color:#333; margin:0; }
#visual_plain_panel ul li a img.active  , #visual_textured_panel ul  li a img.active{ border:5px solid #444;box-shadow:0px 0px 0px 1px #111; }


/* ============================================================ */
/* == Iconable ================================================ */
/* ============================================================ */

.home-layout { margin:10px; }
.home-layout li { float:left; margin:4px; }
.home-layout li a{  width:61px; height:61px; display:block;   }
.home-layout li.active a { border:1px solid #ddd; }
.home-layout li.full-width a {  background: url(i/layout-sprites.jpg) -10px -10px no-repeat; }
.home-layout li.hasLeftSidebar a {  background: url(i/layout-sprites.jpg) -110px -10px no-repeat; }
.home-layout li.hasRightSidebar a {  background: url(i/layout-sprites.jpg) -210px -10px no-repeat; }

.footer-layout { margin:10px; display:block; width:500px; float:left; }
.footer-layout li { float:left; margin:4px; }
.footer-layout li a{  width:61px; height:61px; display:block; border:1px solid transparent;   }
.footer-layout li.active a { border:1px solid #ddd; }
.footer-layout li.two-col a {  background: url(i/layout-sprites.jpg) -610px -10px no-repeat; }
.footer-layout li.three-col a {  background: url(i/layout-sprites.jpg) -710px -10px no-repeat; }
.footer-layout li.four-col a {  background: url(i/layout-sprites.jpg) -10px -110px no-repeat; }
.footer-layout li.five-col a {  background: url(i/layout-sprites.jpg) -110px -110px no-repeat; }
.footer-layout li.six-col a {  background: url(i/layout-sprites.jpg) -210px -110px no-repeat; }

.footer-layout li.one-third a {  background: url(i/layout-sprites.jpg) -310px -110px no-repeat; }
.footer-layout li.one-fourth a {  background: url(i/layout-sprites.jpg) -410px -110px no-repeat; }
.footer-layout li.one-fifth a {  background: url(i/layout-sprites.jpg) -510px -110px no-repeat; }
.footer-layout li.one-sixth a {  background: url(i/layout-sprites.jpg) -610px -110px no-repeat; }

/* ================================================================================ */
/* == WP Editor in Options Panel ================================================== */
/* ================================================================================ */


.home-editor-wrapper { width:550px; margin:20px; height:400px; }
#quicktags { 	border-color: #cfdfe9; 	background-color: #cfdfe9; 	}
#editor-toolbar {	height: 30px; }
#ed_toolbar input { 	border-color: #C3C3C3; }
#ed_toolbar input:hover { 	border-color: #aaa; 	background: #ddd; }

#edButtonPreview,
#edButtonHTML {
	height: 18px;
	margin: 5px 5px 0 0;
	padding: 4px 5px 2px;
	float: right;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	-moz-border-radius: 3px 3px 0 0;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	-khtml-border-top-right-radius: 3px;
	-khtml-border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	background:#eee; border:1px solid #e4e4e4; color:#333;
}

#editor-toolbar .active {
	border-color: #cccccc;
	background-color: #e8e8e8;
	border-bottom:none; 
	color: #111;
	z-index:4;
}
.mceStatusbar { border-top:1px solid #ccc!important; }

/* ================================================================================ */
/* == Option Panel Mode Switcher ================================================== */
/* ================================================================================ */

#hades-mode { float:right; margin-right: -30px;}
#hades-mode li { float:left; margin-left: 15px;}
#hades-mode li a { 
	text-decoration:none; 
	display:block; 	
	font-weight: bold;
	color: #444;
	background: #fff ;
	text-shadow: 1px 1px 1px #fff;
	-khtml-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-moz-border-radius: 2px; 
	padding: 4px 15px  5px; 
	border: 1px solid #ddd!important;
    padding: 6px 15px  6px; }

#hades-mode li a.active { color: #fff;background: #21759B ;border:1px solid #1c5976!important; text-shadow: 1px 1px 1px #1c5976;}

.top-panel input.button-primary, button.button-primary, a.button-primary {
	font-weight: bold;
	color: white;
	background: #21759B ;
	text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
    -khtml-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    padding: 8px 15px;
    border: 1px solid #1c5976!important;
}

.top-panel input.panel-reset, button.panel-reset, a.panel-reset {
	font-weight: bold;
	color: #444;
	background: #fafafa ;
	text-shadow: 1px 1px 1px #fff;
    -khtml-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    padding: 8px 15px;
    border: 1px solid #ddd!important;
}

.top-panel input.custom_upload_image_button, button.custom_upload_image_button, a.button.custom_upload_image_button {
	font-weight: bold;
	color: #444;
	background: #fafafa ;
	text-shadow: 1px 1px 1px #fff;
    -khtml-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    padding: 8px 15px  6px;
    border: 1px solid #ddd!important;	
}

#useful-linklist { margin:0; padding:0; border:1px solid #ccc; }
#useful-linklist li { padding:5px 10px; margin:0; cursor:pointer; }

/* ====== translation panel ========= */

.translation-panel  {padding-bottom: 25px;}
.translation-panel p {padding: 15px;}
.translation-panel ul {padding: 0 15px;}
.translation-panel img {margin: 0 15px 15px;}